<template>
<view class="Home">
  <view class="bgc">
    <view class="backgound"></view>
    <view class="backgound2"></view>
  </view>
  <view class="addMoney">
    <view class="top">
      <view style="display: flex; align-items: center; height: 100rpx;">
        <view class="img">
          <image src="../../static/forest.png" mode=""></image>
        </view>
        <view class="sign-left">
          <view class="name">昵称:{{form.name}}</view>
          <view class="phone">用户名:{{form.companyId}}</view>
          <view class="exdate">到期时间:{{form.exdate}}</view>
        </view>

      </view>
      <!--			<view class="out" @click="quit()">退出登录</view>-->
    </view>
    <view class="addMoneyTittle">
      续费时长
    </view>

    <view class="moneyLaut">
      <view class="money" v-for="(item,index) in money" @click="addmoneyValue(index)"
            :class="{'active':selectedIndex === index}">
        {{item.money}}
      </view>
    </view>
    <view class="selfaddmoney" :class="{'selfaddmoney1':isActive}">
      <text>选择续费时长:</text> <input @focus="isActive = true" @blur="isActive = false" type="text"
         :disabled="true"  v-model="addmoney" class="selfinput">
    </view>
<!--    <view class="info01">-->
<!--      <view class="index01" @click="onclick()">-->
<!--        <view class="">-->
<!--          <view class="text01">我的优惠券</view>-->
<!--          <view class="border"></view>-->
<!--        </view>-->
<!--        <image src="@/static/优惠券.png" mode="" class="image01"></image>-->
<!--      </view>-->
<!--    </view>-->
    <view>
      邀请码：{{infor.ivcode}}
    </view>
    <view>
      邀请人数：{{infor.ivnum}}
    </view>
<!--    <view>-->
<!--      返利金额：{{infor.ivmoney}}-->
<!--    </view>-->

  </view>
  <view class="tcpay">
    <text style="font-size: 25rpx;padding-left: 34%;
    font-weight: bold;
    color: red;">测试功能仅供测试使用</text>
    <view class="btnlist">
    <view class="choose-item" v-for="(item,index) in list">
      <image class="img1" :src="item.url" mode=""></image>
      {{ item.name }}
    </view>
  </view>
    <view class="btn">
      <text style="padding-left: 30rpx;">待支付</text>
      <text style="color:#578afd;">{{parseFloat(realpay).toFixed(2)}}</text>
      <view class="pay" @click="pay()">去支付</view>
    </view>
  </view>
</view>
</template>


<script>
import { payOrder, getWxPayState
} from '@/common/api.js'

export default {
  data() {
    return {
      show: false,
      show1: false,
      showOverlay: false, // 控制overlay显示与否的变量
      appointmentStatus: true, // 假设初始状态为预约失败
      selectedOldMan: 0,
      selectedIndex: null, // 用于存储当前选中的元素索引

      inforList: [{
        name: "吴海军",
        phon: "135 2589 3657",
        idNumber: "430525199401053654",
        identifier: "2358697454"

      }],
      money: [{
        realpay: '29.9',
        money: '一个月(31天)',
        value: '一个月'
      }, {
        realpay: '69.9',
        money: '一季度(93天)',
        value: '一季度'
      },
      //   {
      //   real: '129.9',
      //   money: '半年(183天)',
      //   value: '半年'
      // },
        {
        realpay: '239.9',
        money: '一年(365天)',
        value: '一年'
      }
      // , {
      //   real: '469.9',
      //   money: '两年(730天)',
      //   value: '两年'
      // }, {
      //   real: '669.9',
      //   money: '三年(1095天)',
      //   value: '三年'
      // }
      ],
      infor: {},
      form: {},
      realpay: '29.9',
      addmoney: '一个月',
      isActive: false,
      list: [{
        name: "微信支付",
        url: '/static/微信支付.png'
      }
      ],
    }
  },
  onLoad() {
    console.log('infor:',uni.getStorageSync('infor'));
    this.infor = uni.getStorageSync('infor');
    this.form = uni.getStorageSync('infor');
  },
  methods: {
    addmoneyValue(index) {
      this.selectedIndex = index; // 设置当前选中的索引
      this.addmoney = this.money[index].value;
      this.realpay = this.money[index].realpay;
      uni.showToast({
        title: '已选择' + this.money[index].value,
        icon: 'none'
      })
    },
    pay() {
      let that = this;
      uni.showLoading({
        title: '调起中...',
      });

      // 随机生成16位整数
      var randomNumber = Math.floor(Math.random() * 10000000000000000);
      const rdm = 'RC'+randomNumber;
      var form = {

        openid: uni.getStorageSync('openid'),
        description: that.form.account+'账号续费-'+ that.addmoney,
        attach: that.form.account+'账号续费-',
        PayFee: '0.01',
        // PayFee: that.realpay,
        TransactionId: rdm,
        id: that.form.id,
        datetype: that.addmoney,
      };
      console.log(form)
      payOrder(form).then((res) => {
        if (res.code == 0) {
          uni.hideLoading();
          console.log(res.data)
          const data = res.data;
          wx.requestPayment({
            timeStamp: data.timeStamp,
            nonceStr: data.nonceStr,
            package: data.package,
            signType: data.signType,
            paySign: data.paySign,
            success: function (wxRes) {
              console.log('成功', wxRes)
              const data0 = {
                transaction_id: rdm,
                id: that.form.id,
                type: that.addmoney,
                paytype: '续费',
              }
              getWxPayState(data0).then((res2) => {
                if (res2.code == 0){
                  uni.showToast({
                    title: '续费成功',
                    icon: 'success',
                    mask: true
                  });
                } else {
                  uni.showToast({
                    title: res2.msg,
                    icon: 'error',
                    mask
                  })
                }
              }).catch(function (err) {
                console.log('request fail', err);
                uni.showToast({
                  title: '主动查询网络错误2',
                  icon: 'error',
                  mask: true
                });
              });
            },
            fail: function (result) {

            },
            complete: function (result) {
              console.log('complete', result)
            },
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'error',
            mask: true
          });
        }
      }).catch(function (err) {
        console.log('request fail', err);
        uni.showToast({
          title: '网络错误2',
          icon: 'error',
          mask: true
        });
      });
    },
    onclick() {
      uni.navigateTo({
        url: '/subPackage/Function/Price/YHQ'
      })
    },
  },
}
</script>


<style>
.tcpay{
  margin-top: 32%;
}
.pay {
  width: 250rpx;
  height: 100%;
  background-color: #578afd;
  color: white;
  text-align: center;
}
.btn {
  margin-bottom: 50rpx;
  margin-top: 3%;
  width: 100%;
  height: 80rpx;
  //border-top: 1rpx solid black;
  border-bottom: 1rpx solid black;
  line-height: 80rpx;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
.img1 {
  width: 50rpx;
  height: 50rpx;
  // line-height: 50rpx;
}
.btnlist {
  width: 96%;
  margin: 0 auto;
  border: 1rpx solid black;
  border-radius: 10rpx;

}
.choose-item {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  // background-color: #F7F7F7;
  //background-color: white;
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}
.Home {
  height: 100%;
  width: 100%;
}

.bgc {
  display: flex;
}

.backgound {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#FFE2D1, #FDF8F2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -9999;
}

.backgound2 {
  width: 100%;
  //height: 100%;
  background-color: #f0f0f0;
  position: absolute;
  top: 100%;
  z-index: -9999;
}
.exdate {
  font-size: 22rpx;
  color: red;
  font-weight: bold;
  /* color: white; */
}
.top {
  border-radius: 30rpx;
  margin: 75rpx 30rpx 30rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sign-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin-left: 20rpx;
}
.img {
  width: 100rpx;
  height: 100rpx;
}
.img image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.addMoney {
  //margin-top: 20rpx;
  height: 100%;
  padding: 30rpx 20rpx 54rpx 22rpx;
  //background: #FFFFFF;
  //box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
.money {
  width: 202rpx;
  height: 124rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  //border: 1rpx solid #999999;
  text-align: center;
  line-height: 124rpx;
  margin-bottom: 20rpx;
  transition: all 0.3s ease; /* 添加过渡效果 */
  box-shadow: 0 4rpx 8rpx rgba(93, 91, 91, 0.3); /* 添加阴影效果 */
}
.money.active {
  border-color: #E6D39A; /* 改变边框颜色 */
  background-color: #FFFAE7; /* 背景颜色 */
  color: #E0B042; /* 文本颜色 */
  //box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}
.selfaddmoney1 {
  display: flex;
  align-items: center;
  margin-top: 28rpx;
  margin-bottom: 36rpx;
  width: 650rpx;
  height: 76rpx;
  background: #F6F5FF;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  border: 2rpx solid #5448FF;
  text-align: center;
  line-height: 76rpx;
  padding-left: 32rpx;
  box-sizing: border-box;
}

.selfaddmoney {
  display: flex;
  align-items: center;
  margin-top: 28rpx;
  margin-bottom: 36rpx;
  width: 650rpx;
  height: 76rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  border: 2rpx solid #999999;
  text-align: center;
  line-height: 76rpx;
  padding-left: 32rpx;
  box-sizing: border-box;
}

.selfinput {
  width: 400rpx;
  text-align: right;
}

.selfinputtext {
  font-size: 20rpx;
  margin-top: 8rpx;
}

.addMoneyTittle {
  font-size: 32rpx;
  color: #5448FF;
}

.moneyLaut {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.info01 {
  display: flex;
  //margin: 0 30rpx;
  justify-content: space-between;
  margin-top: 25rpx;
  /* flex-wrap: wrap; */
}

.index01 {
  width: 270rpx;
  height: 56rpx;
  padding: 30rpx;
  border-radius: 30rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}

.image01 {
  width: 54rpx;
  height: 56rpx;
  margin-top: 20rpx;
}

.text01 {
  font-size: 30rpx;
  /* margin-left: 25rpx; */
  font-weight: bold;
}

.border {
  width: 40rpx;
  height: 26rpx;
  border-bottom: 6rpx solid #F9363A;
  border-radius: 2px;
}
</style>
